<template>
  <section class="section product">
    <div class="container">
      <h2 class="h2 section-title">热门分类</h2>
      <ul class="filter-list">
        <li v-for="category in productCategories" :key="category">
          <button class="filter-btn" :class="currentTab === category ? 'active' : ''" @click="currentTab = category">{{
              category
            }}</button>
        </li>
      </ul>
      <ul class="product-list">
        <li v-for="product in currentProducts" :key="product.name" class="product-item">
          <div class="product-card">
            <figure class="card-banner">
              <img :src="product.image" loading="lazy"
                   class="image-contain" @click="handleProductClick(product.id)">
              <div class="card-badge">{{ product.tag || 'New' }}</div>
              <ul class="card-action-list">
                <li class="card-action-item">
                  <button class="card-action-btn el-icon-goods" aria-labelledby="card-label-1" @click="handleAdd(product)">
                  </button>
                  <div class="card-action-tooltip" id="card-label-1">添加到购物车</div>
                </li>
                <li class="card-action-item">
                  <button class="card-action-btn el-icon-view" aria-labelledby="card-label-3" @click="handleProductClick(product.id)">
                  </button>
                  <div class="card-action-tooltip" id="card-label-3" >查看详情</div>
                </li>
<!--                <li class="card-action-item">-->
<!--                  <button class="card-action-btn el-icon-star-off" aria-labelledby="card-label-4">-->
<!--                  </button>-->
<!--                  <div class="card-action-tooltip" id="card-label-4">收藏</div>-->
<!--                </li>-->
<!--                <li class="card-action-item">-->
<!--                  <button class="card-action-btn el-icon-search" aria-labelledby="card-label-4">-->
<!--                  </button>-->
<!--                  <div class="card-action-tooltip" id="card-label-4">找相似</div>-->
<!--                </li>-->
              </ul>
            </figure>

            <div class="card-content"
                 style="height: 150px;display: flex;flex-direction: column;justify-content:space-between;">
              <h3 class="h3 card-title">{{ product.name }}</h3>
              <data class="card-price">¥ {{ product.price }}</data>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </section>
</template>

<script>
export default {
  data() {
    return {
      user:localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) :{},
      memberId:localStorage.getItem("id"),
      productRes:[],
      products: [],
      currentTab: '',
      form:{}
    }
  },
  created() {
    this.load();

  },
  computed: {
    productCategories() {
      const allTypes = Object.keys(this.products)
      this.currentTab = allTypes[0]
      return allTypes
    },
    currentProducts() {
      return this.products[this.currentTab]
    }
  },
  methods: {
    handleProductClick(pid) {
      this.$router.push({
        path: this.$router.push({path: '/front/detail', query: {id: pid}})
      })
    },
    load() {
      this.request.get("/product/home").then(res => {
        const products = res.data
        console.log("products",products)
        // 这里不需要改
        const productsGrouped = products.reduce((acc, cur) => {
          const { productCategoryName } = cur
          if (!acc[productCategoryName]) {
            acc[productCategoryName] = []
          }
          acc[productCategoryName].push(cur)
          return acc
        }, {})

        this.products = productsGrouped
      })
    },
    handleAdd(product){
      if(!this.user.username){
        this.$message.warning("请登陆后操作")
        return
      }
      let spData ='[{"key":"颜色","value":"默认"},{"key":"尺寸","value":"默认"}]'
      this.form.spData = spData
      this.form.productId= product.id
      this.form.memberId = this.memberId
      this.form.quantity = 1
      this.form.productPic = product.image
      this.form.productName = product.name
      this.form.price = product.price
      this.form.deleteStatus = 1
      this.form.memberNickname = this.user.nickname
      this.request.post("/cart",this.form).then(res=>{
        if(res){
          this.$message.success("添加成功！")
        }else{
          this.$message.error("网络开小差啦！请稍后再试")
        }
      })
      this.$router.push('/front/shoppingCart')
      console.log(this.form)
    }
  }
}
</script>

<style>
</style>